import React, { useState } from 'react'
import { Card, Tag, NumberKeyboard, Tabs } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import db from '../../../util/db';
import { payType, type, incomeType } from '../../../util/typeConst'
export default function PayPage() {
  const [pay, setPay] = useState('0');
  const [income, setIncome] = useState('0');
  const [detailType, setDetail] = useState(payType[0]);
  const [remark, setRemark] = useState('');
  const [inputType, setInputType] = useState('pay');
  const navigate = useNavigate();
  const actions = {
    onInput: (key) => {
      window.navigator.vibrate(50)
      if (inputType === 'pay') {
        setPay(pay + key);
      } else {
        setIncome(income + key);
      }
    },
    onDelete: () => {
      window.navigator.vibrate(50)
      if (inputType === 'pay') {
        let newPay = pay.substring(0, pay.length - 1);
        setPay(newPay);
      } else {
        let newIncome = pay.substring(0, income.length - 1);
        setIncome(newIncome)
      }
    },
  }
  const doConfirm = () => {
    // eslint-disable-next-line no-mixed-operators
    if (inputType === 'pay' && (+ pay > 0) || inputType === 'income' && (+income > 0)) {
      let params = {
        type: inputType === 'pay' ? type.pay : type.income,
        detailType: detailType,
        money: inputType === 'pay' ? +pay : +income,
      }
      console.log(params);
      if (remark.length > 0) {
        params.remark = remark;
      }
      db.insertData(params, () => {
        setPay(0);
        setRemark('');
        navigate('/');
      });
    }
  }
  const onTabChange = (e) => {
    console.log(e);
    setInputType(e);
    if (e === 'pay') {
      setDetail(payType[0]);
    } else {
      setDetail(incomeType[0]);
    }
  }
  const renderHead = () => (
    <Tabs onChange={onTabChange}>
      <Tabs.Tab title='支出' key='pay'>
        <div>
          <Card style={styles.newDataContainer}>
            <div style={styles.FLEX_ROW_BETWEEN_CENTER}>
              <div>
                <p style={{ color: '#000', fontSize: '16px' }}>{`金额`}</p>
              </div>
              <div>
                <Tag round color='#ff6430'>
                  {+pay}
                </Tag>
              </div>
            </div>
          </Card>
          <Card style={{ height: '20vh' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', }}>
              {payType.map((item, index) => {
                return (
                  <div
                    style={item.cn === detailType.cn ? styles.SelectItem : styles.unSelectItem}
                    key={index}
                    onClick={() => { setDetail(item) }}>
                    <div><img src={item.icon} alt={''} /></div>
                    <div style={{ fontSize: 12 }}>{item.cn}</div>
                  </div>
                )
              })}
            </div>
          </Card >
        </div >
      </Tabs.Tab>
      <Tabs.Tab title='收入' key='income'>
        <div>
          <Card style={styles.newDataContainer}>
            <div style={styles.FLEX_ROW_BETWEEN_CENTER}>
              <div>
                <p style={{ color: '#000', fontSize: '16px' }}>{`金额`}</p>
              </div>
              <div>
                <Tag round color='#87d068'>
                  {+income}
                </Tag>
              </div>
            </div>
          </Card>
          <Card style={{ height: '20vh' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', }}>
              {incomeType.map((item, index) => {
                return (
                  <div
                    style={item.cn === detailType.cn ? styles.SelectItem : styles.unSelectItem}
                    key={index}
                    onClick={() => { setDetail(item) }}>
                    <div>
                      <img src={item.icon} alt={''} />
                    </div>
                    <div style={{ fontSize: 12 }}>{item.cn}</div>
                  </div>
                )
              })}
            </div>
          </Card >
        </div >
      </Tabs.Tab>
    </Tabs>
  )
  const renderKeyBoard = () => (
    <NumberKeyboard
      visible={true}
      onInput={actions.onInput}
      onDelete={actions.onDelete}
      showCloseButton={false}
      confirmText='确定'
      onConfirm={doConfirm}
    />
  )
  return (
    <div style={styles.container}>
      {renderHead()}
      {renderKeyBoard()}
    </div>
  )
}

const styles = {
  container: {
    backgroundColor: '#EFF3FF',
    height: '100vh'
  },
  newDataContainer: {
    marginBottom: '2VH',
    padding: '12px'
  },
  FLEX_ROW_BETWEEN_CENTER: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  unSelectItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '25%',
    marginBottom: '5%',
    borderRadius: '10%'
  },
  SelectItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '25%',
    marginBottom: '5%',
    borderRadius: '10%',
    backgroundColor: 'rgba(231,127,155,0.3)'
  }
}
